<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
     *{
     	margin:0;
     	padding:0;
     }
     ul,li{
     	list-style-type: none;
     }
     header{
     	width:100%;
     	height:60px;
     	background: gray;
     }
     #add{
     	font-size:20px;
     	position:absolute;
     	left:580px;
     	top:90px;
     }
     #refresh{
     	font-size:20px;
     	position:absolute;
     	left:680px;
     	top:90px;
     }
     table{
     	width:800px;
     	margin:150px 0 0 250px;
     }
     tbody{
     	text-align: center;
     }
     tbody img{
     	width:35px;
     	height:35px;
     }
     .wrap{
     	width:100%;
     	height:100%;
     	position:absolute;
     	top:0;
     	left:0;
     	background: rgba(0,0,0,0.3);
     	display: none;
     }
     .box{
     	width:600px;
     	height:400px;
     	background: #ccc;
     	margin:100px auto;
     }
     .title{
     	width:600px;
     	height:30px;
     	line-height: 30px;
     	font-size: 20px;
     	background: #eee;
     	display: flex;
     	justify-content: space-between;
     }
    .left{
    	float: left;
    	width:300px;
    	margin-top:10px;
    	/*margin-left: 20px;*/
    }
    .right{
    	float:left;
    	width:300px;
    	margin-top:10px;

    	/*margin-left: 340px;*/
    }
    .left span,.right span{
    	display: inline-block;
    	text-align: right;
    	width:80px;
    }
    .left li,.right li{
    	height:40px;
    	line-height: 40px;
    	font-size: 16px;
    }
    .left input,.right input{
    	height:20px;
    	width:180px;
    	margin-left: 20px;
    	font-size: 16px;
    }
    #tian{
    	width:60px;
    	height:25px;
    	float: right;
    	margin:5px 60px 0 0;
    }


	</style>
</head>
<body>

<!-- 图书系统 -->
    <header></header>
	<button id="add">添加数据</button>
	<button id="refresh">刷新</button>
	<table border="1" cellspacing="0">
         <thead>
              <th id="first"><input type="checkbox" name="" id="che"></th>
              <th>图片</th>
              <th>书名</th>
              <th>作者</th>
              <th>会员价</th>
              <th>出版社</th>
              <th>操作</th>
         </thead> 
         <tbody id="tab"></tbody>  
	</table>
	<div class="wrap">
        <div class="box">
        <div class="title">
            新建书籍
            <div>
            <span>-</span>
            <span>□</span>
            <span class="guan">X</span>
            </div>
        </div>
       <ul class="left">
           <li><span>书名</span><input type="text" name=""></li>
           <li><span>副标题</span><input type="text" name=""></li>
           <li><span>价格</span><input type="text" name=""></li>
           <li><span>会员价</span><input type="text" name=""></li>
           <li><span>校园价</span><input type="text" name=""></li>
           <li><span>评分</span><input type="text" name=""></li>
           <li><span>作者</span><input type="text" name=""></li>
           <li><span>出版社</span><input type="text" name=""></li>
       </ul>
        <ul class="right">
           <li><span>ISBN</span><input type="text" name=""></li>
           <li><span>上架时间</span><input type="text" name=""></li>
           <li><span>出版时间</span><input type="text" name=""></li>
           <li><span>开本</span><input type="text" name=""></li>
           <li><span>页数</span><input type="text" name=""></li>
           <li><span>版本</span><input type="text" name=""></li>
           <li><span>分类</span><input type="text" name=""></li>
           <li><span>图片</span><input type="text" name=""></li>
       </ul>
       <button id="tian">添加</button>
       </div>
	</div>
</body>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var t;
   $("#add").on("click", function(){
   	$(".wrap").css("display","block")
   })
   $(".guan").on("click",function(){
   	$(".wrap").css("display","none");
   })
   $("#tian").on("click",function(){
   	$(".wrap").css("display","none");
   	$.get("http://localhost:6500/books",function(data){
        console.log(data)
   	})
   	var arr = {
   		bookname:$("input").eq(1).val(),
   		subname:$("input").eq(2).val(),
   		price:$("input").eq(3).val(),
   		vipprice:$("input").eq(4).val(),
   		stuprice:$("input").eq(5).val(),
   		grade:$("input").eq(6).val(),
   		name:$("input").eq(7).val(),
   		press:$("input").eq(8).val(),
   		isbn:$("input").eq(9).val(),
   		launchtime:$("input").eq(10).val(),
   		publicationtime:$("input").eq(11).val(),
   		booksize:$("input").eq(12).val(),
   		pagination:$("input").eq(13).val(),
   		release:$("input").eq(14).val(),
   		classify:$("input").eq(15).val(),
   		pic:$("input").eq(16).val()

   	}
   	$.post("http://localhost:6500/books",arr,function(data){
       console.log(data)
   	})
   })

   $("#refresh").on("click",function(){
    $("#tab tr").remove();
   	 $.get("http://localhost:6500/books",function(data){
   	 	console.log(data);
   	 	for(var i = 0; i<data.length;i++){
   	 			$("<tr class='t1'><td id='first'><input type='checkbox' name='' id='che'></td><td><img src='"+data[i].pic+"'></td><td>"+data[i].bookname+"</td><td>"+data[i].name+"</td><td>"+data[i].vipprice+"</td><td>"+data[i].press+"</td><td><button class='shan'>删除</button><button class='gai'>修改</button><span id='del' style='display:none;'>"+data[i].id+"</span></td></tr>").appendTo($("#tab"))

   	
   	 			$(".t1").on("click",".shan",function(){
   	 				t=this.parentNode.parentNode;
                    deleteData(data)
   	 				$(this).remove();
   	            
   	 			})
   	 			//修改
   	 			// $(".gai").on("click",function(){
   	 			// 	$(".wrap").css("display","block");

   	 		
   	 	}	
   	 
   	 })
   })
function deleteData(data){
   $.ajax({
   	 url:"http://localhost:6500/books"+"/"+$("#del").html(),
   	 type:"delete",
   	 success:function(data){
   	 	t.remove();
   	 },
   	 error:function(err){
   	 	console.log(err)
   	 }
   	 	})
}
</script>
</html>